import { Space, List, Card, Avatar } from "antd";
import { Card as SemiCard } from "@douyinfe/semi-ui";
import { useModel, history } from "umi";
import { useEffect, useState } from "react";
import Jdenticon from "react-jdenticon";

import { PersonOrganizations } from "../../_graphql/persons";

const PersonOrganizationsPage = () => {
    const { windowInnerHeight, graphqlFetchPlatform } = useModel("global");
    const { currentPerson } = useModel("person.info");

    const [loading, setLoading] = useState(false);
    const [organizations, setOrganizations] = useState([]);

    const loadOrganizations = async () => {
        setLoading(true);
        let res = await graphqlFetchPlatform({ query: PersonOrganizations, variables: { personUuid: currentPerson } });
        setOrganizations(res?.a?.nodes || []);
        setLoading(false);
    };

    useEffect(() => {
        currentPerson && loadOrganizations();
    }, [currentPerson]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 60 - 54 - 2;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>加入的组织信息</span>}
                headerExtraContent={<Space style={{ lineHeight: "32px", fontSize: 14, fontWeight: 600 }}></Space>}
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                size="default"
                bodyStyle={{ padding: 20, height: cardBodyHeight }}
            >
                <List
                    loading={loading}
                    grid={{ gutter: 20, xs: 1, sm: 2, md: 2, lg: 2, xl: 3, xxl: 4 }}
                    dataSource={organizations}
                    renderItem={(item) => (
                        <List.Item style={{ marginBottom: 16, padding: 0 }}>
                            {item.isDefault === true ? (
                                <Badge.Ribbon text="默认组织" placement="end">
                                    <ItemCard item={item} />
                                </Badge.Ribbon>
                            ) : (
                                <ItemCard item={item} />
                            )}
                        </List.Item>
                    )}
                />
            </SemiCard>
        </div>
    );
};

const ItemCard = ({ item }) => {
    const { kuboUrl } = useModel("kubo");
    const { setCurrentOrganizationUuid } = useModel("organization.info");
    const { uuid, fullName, shortName, type, logoHash, officeLocation } = item.b;
    const avatarUrl = kuboUrl && logoHash ? kuboUrl + logoHash : <Jdenticon size="48" value={fullName} />;
    const description = (
        <div>
            <div>{shortName + " - " + type}</div>
            <div>{officeLocation}</div>
        </div>
    );
    return (
        <Card
            size="small"
            hoverable
            bordered={true}
            onClick={() => {
                setCurrentOrganizationUuid(uuid, fullName);
                history.replace("/organizations/baseinfo");
            }}
        >
            <Card.Meta avatar={<Avatar shape="square" src={avatarUrl} size={48} />} title={<div>{fullName}</div>} description={description} />
        </Card>
    );
};

export default PersonOrganizationsPage;
